
<script>
export default {
  name: "ThreeMenu",
  functional: true,
  props: {
    menuData: {
      type: Array,
      default: () => {
        [];
      }
    }
  },
  render(h, context) {
    const { menuData } = context.props;
    const vnodes = [];
    const getMenuItemPath = item => {
      //console.log(item);
      if (item.deprecated) {
        if (item.hasNew) {
          return (
            <router-link class="knife4j-menu-api-deprecated" to={item.path}>
              {item.icon ? <my-icon type={item.icon}></my-icon> : ""}
              <a-badge
                status="processing"
                title="新接口"
                style="margin-bottom:3px;"
              />
              <span>{item.name}</span>
            </router-link>
          );
        } else {
          return (
            <router-link class="knife4j-menu-api-deprecated" to={item.path}>
              {item.icon ? <my-icon type={item.icon}></my-icon> : ""}
              <span>{item.name}</span>
            </router-link>
          );
        }
      } else {
        if (item.hasNew) {
          return (
            <router-link to={item.path}>
              {item.icon ? <my-icon type={item.icon}></my-icon> : ""}
              <a-badge
                status="processing"
                title="新接口"
                style="margin-bottom:3px;"
              />
              <span>{item.name}</span>
            </router-link>
          );
        } else {
          return (
            <router-link to={item.path}>
              {item.icon ? <my-icon type={item.icon}></my-icon> : ""}
              <span>{item.name}</span>
            </router-link>
          );
        }
      }
    };

    const getSubMenuOrItem = item => {
      if (item.children && item.children.some(child => child.name)) {
        const childrenItems = getNavMenuItems(item.children); // eslint-disable-line
        // 当无子菜单时就不展示菜单
        if (childrenItems && childrenItems.length > 0) {
          if (item.hasNew) {
            return (
              <a-sub-menu
                key={item.key}
                title={
                  item.icon ? (
                    <span>
                      <my-icon type={item.icon}></my-icon>
                      <a-badge
                        status="processing"
                        title="新接口"
                        style="margin-bottom:3px;"
                      />
                      <span>{item.name}</span>
                    </span>
                  ) : (
                    <span>{item.name}</span>
                  )
                }
              >
                {childrenItems}
              </a-sub-menu>
            );
          } else {
            return (
              <a-sub-menu
                key={item.key}
                title={
                  item.icon ? (
                    <span>
                      <my-icon type={item.icon}></my-icon>
                      <span>{item.name}</span>
                    </span>
                  ) : (
                    <span>{item.name}</span>
                  )
                }
              >
                {childrenItems}
              </a-sub-menu>
            );
          }
        }
        return null;
      } else {
        return (
          <a-menu-item key={item.key}>{getMenuItemPath(item)}</a-menu-item>
        );
      }
    };

    const getNavMenuItems = data => {
      if (!data) {
        return [];
      }
      return data.map(item => {
        return getSubMenuOrItem(item);
      });
    };

    const DOM = getNavMenuItems(menuData);
    vnodes.push(DOM);
    return vnodes;
  }
};
</script>
